import React from 'react';
import { Link } from 'react-router-dom';
/*导航区域的样式*/
import styled from 'styled-components';
const NavBox = styled.nav`
  a {
    margin-right: 10px;
    color: #000;
  }
`;
/* 
只要在<HashRouter>或者<BrowserRouter>中渲染的组件：
   我们在组件内部,基于useHistory/useLocation/useRouteMatch这些Hook函数,就可以获取history/location/match这些对象信息！！
   即便这个组件并不是基于<Route>匹配渲染的！！

只有基于<Route>匹配渲染的组件,才可以基于props属性,获取这三个对象信息！！
*/
const HomeHead = function HomeHead() {
  return (
    <NavBox>
      <Link to='/a'>A</Link>
      <Link to='/b'>B</Link>
      <Link to='/c'>C</Link>
    </NavBox>
  );
};

export default HomeHead;
